window.onload = function () {

    // 星星评价的js  取event中的offsetx  
    // 赋值给实星的宽度即可实现
    // let box=this.document.querySelectorAll('.start')
    // let startFull=document.querySelectorAll('.start-full');
    // let index=''
    // for(let i=0;i<box.length;i++){
    //     box[i].addEventListener('click',function(event){
    // console.log(event.offsetX);
    // startFull[i].style.width = event.offsetX +'px';

    //     })
    // }
    // 取商品前面勾选框的dom
    let checks = document.querySelectorAll('#jiagou');
    let alls = this.document.querySelectorAll('.all');
    let adds = document.querySelectorAll('.add');
    let pres = document.querySelectorAll('.jian')

    let inputs = document.querySelectorAll('#inputt');
    // 取单价的dom
    let moneys = document.querySelectorAll('.money');
    // 取小计的dom
    let prices = document.querySelectorAll('.money1')

    let span1 = document.querySelector('.y span');
    let span2 = document.querySelector('.z span');


    // 数量加减
    for (let i = 0; i < inputs.length; i++) {
        adds[i].addEventListener('click', function () {
            // 获取value值，转换为数字+1赋值给inputs
            let b = inputs[i].value = parseInt(inputs[i].value) + 1
            let a = parseFloat(moneys[i].innerHTML);
            // 小计
            prices[i].innerHTML = (a * b).toFixed(2);
            total();
        })

        pres[i].addEventListener('click', function () {
            inputs[i].value = parseInt(inputs[i].value) - 1;
            if (inputs[i].value < 1) {
                inputs[i].value = 1;
            }
            let a = parseFloat(moneys[i].innerHTML);
            let b = inputs[i].value;
            prices[i].innerHTML = (a * b).toFixed(2);
            total();
        })








        // 点击全选按钮需要把所有子复选框按钮全部勾选上
        for (let i = 0; i < alls.length; i++) {
            alls[i].addEventListener('click', function () {
                // 获取遍历全选按钮的cheked值
                console.log(alls[i].checked)
                for (let j = 0; j < checks.length; j++) {
                    // 将所有的子复选框全部赋值为alls[i].checked
                    checks[j].checked = alls[i].checked;
                }
                //    将所有的全选按钮的cheked值赋值为当前全选按钮的checed值
                alls[0].checked = alls[i].checked;
                alls[1].checked = alls[i].checked;
                total();
            })
        }

        // 子复选框影响全选框
        // 第一种方法

        // for (let i = 0; i < checks.length; i++) {
        //     checks[i].addEventListener('click', function () {
        //         let fl = '';
        //     //  循环子复选框--判断每一个子复选框的cheked属性
        //     // cheked属性==true   fl++
        //     for(let j=0;j<checks.length;j++){
        //         //如果所有的checks的值都为true的话，定义的变量就加1，
        //      if(checks[j].checked==true){
        //          fl++
        //      }  
        //     }
        //     // 当循环结束，定义的变量等于子复选框的长度时，全选按钮的checked值就为true;
        //      if(fl==checks.length){
        //         alls[0].checked = true;
        //         alls[1].checked = true;
        //      }else{
        //         alls[0].checked = false;
        //         alls[1].checked = false;
        //      }
        //     })

        // }

        // 第二种方法




        for (let i = 0; i < checks.length; i++) {
            checks[i].addEventListener('click', function () {
                //  定义一个变量 标杆  表示两种状态  true  false
                // 赋值给全选框
                //默认为true
                let flag = true;
                for (let j = 0; j < checks.length; j++) {
                    //  循环判断一个子复选框的checks值为false时,定义的变量
                    // 就变为false
                    if (checks[j].checked == false) {
                        flag = false
                    }
                }
                alls[0].checked = flag;
                alls[1].checked = flag;
                total();

                
            })
        }
function total(){
    // 定义两个变量
    let sum=0;
    let sumPrice=0;
    // 循环所有的子复选框--判断该复选框是否选中
    for(let m=0;m<checks.length;m++){
        if(checks[m].checked==true){
            // 如果选中---获取该子复选框对应的数量
            // 对应的数量累加道sum
           sum=sum+parseInt(inputs[m].value)
        //    获取该子复选框对应的小计 累加到sumPrice
        sumPrice=sumPrice+parseFloat(prices[m].innerHTML)
        }
    }
        // 修改页面的don总量和总价
        span1.innerHTML=sum;
        span2.innerHTML=sumPrice;
    
}

    }



}
